<template>
    <div class="indexBox">
        <!--轮播图-->
        <div class="page-swipe">
          <mt-swipe :auto="4000">
            <mt-swipe-item><img src="./img/banner@2x.png"></mt-swipe-item>
            <mt-swipe-item><img src="./img/banner@2x.png"></mt-swipe-item>
            <mt-swipe-item><img src="./img/banner@2x.png"></mt-swipe-item>
          </mt-swipe>
        </div>

        <div class="banner2">
            <span class="b-img">
              <img src="./img/text@2x.png">
            </span>
            <span class="b-content">
              <h3>凯德广场交大路店<span>(阅享书柜)</span></h3>
              <p>成都市金牛区交大路188号</p>
            </span>
        </div>

        <div class="oneweek">
          <router-link tag="h2" to="/goodbook" @click.native="goodbook">
          一周好书<img src="./img/icon_next@2x (2).png"></router-link>
          <div class="banner3">
            <div class="swiper-container2 swiper-container-horizontal">
              <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                  <div class="swiper-slide swiper-slide-active" >
                    <div class="b3-list">
                      <img src="./img/4@2x.png">
                      <p class="b3-title">等一朵花开</p>
                      <p class="b3-author">林迪万</p>
                    </div>
                  </div>
                  <div class="swiper-slide swiper-slide-next" >
                    <div class="b3-list">
                      <img src="./img/4@2x.png">
                      <p class="b3-title">等一朵花开</p>
                      <p class="b3-author">林迪万</p>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="b3-list">
                      <img src="./img/2@2x.png">
                      <p class="b3-title">等一朵花开</p>
                      <p class="b3-author">林迪万</p>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="b3-list">
                      <img src="./img/3@2x.png">
                      <p class="b3-title">等一朵花开</p>
                      <p class="b3-author">林迪万</p>
                    </div>
                  </div>
                  <div class="swiper-slide swiper-slide-next" >
                    <div class="b3-list">
                      <img src="./img/4@2x.png">
                      <p class="b3-title">等一朵花开</p>
                      <p class="b3-author">林迪万</p>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="b3-list">
                      <img src="./img/2@2x.png">
                      <p class="b3-title">等一朵花开</p>
                      <p class="b3-author">林迪万</p>
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="b3-list">
                      <img src="./img/3@2x.png">
                      <p class="b3-title">等一朵花开</p>
                      <p class="b3-author">林迪万</p>
                    </div>
                  </div>
              </div>
            </div>
          </div>
          <h3>换一批<img src="./img/icon_retern@2x.png"></h3>
        </div>

        <div class="banner4">
          <h2>阅享活动<img src="./img/icon_next@2x (2).png"></h2>
          <div class="swiper-container swiper-container-horizontal">
              <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(0px, 0px, 0px);">
                  <div class="swiper-slide swiper-slide-active" >
                   <img src="./img/b1.jpg">
                  </div>
                  <div class="swiper-slide swiper-slide-next" >
                    <img src="./img/b2.jpg">
                  </div>
                  <div class="swiper-slide">
                    <img src="./img/b3.jpg">
                  </div>
                  <div class="swiper-slide">
                    <img src="./img/b4.jpg">
                  </div>
              </div>
            </div>
        </div>

        <div class="banner5">
          <router-link tag="h2" to="life" @click.native="life">
            文化生活<img src="./img/icon_next@2x (2).png">
          </router-link>

          <div class="b5-Box">
            <img class="b4-img1" src="./img/b4.jpg">
            <h4>凡心所向，素履以往</h4>
            <p>那些你在深夜度过的书，那些你在深夜度过的书，那些你在深夜度过的书，那些你在深夜度过的书，那些你在深夜度过的书，</p>
          </div>

        </div>
    </div>
</template>

<script>
import swiper from '../../../static/swiper.js'
import '../../../static/swiper.css'


export default{
  data(){
    return {

    }
  },
    methods:{
      goodbook:function (){
        this.$store.dispatch('closeShow','index');
        this.$store.dispatch('openShow','good');
      },
      life:function (){
        this.$store.dispatch('closeShow','index');
        this.$store.dispatch('openShow','life');
      }
    },
    mounted () {
      var swiper = new Swiper('.swiper-container', {
          slidesPerView: 'auto',
          spaceBetween: 10
      });
      var swiper2 = new Swiper('.swiper-container2', {
          slidesPerView: '3',
          spaceBetween: 10
      });
    }
}
</script>

<style lang="Sass">
@mixin transform ($sizing) {
    -webkit-transfrom:$sizing;
       -moz-transfrom:$sizing;
            transfrom:$sizing;
}
@mixin transition ($sizing) {
    -webkit-transition:$sizing;
       -moz-transition:$sizing;
            transition:$sizing;
}
.indexBox{width: 100%; height: 100%; transition:all 0.5s ease;  transform: translate3d(0,0,0); padding-bottom:2.95rem; overflow: hidden; margin-top: 1rem;

  .page-swipe{
    width: 100%; height: 7.5rem;
  }
  .mint-swipe{
    width: 100%; height: 7.5rem;

    .mint-swipe-items-wrap{width: 100%; height: 7.5rem;

      .mint-swipe-item{width: 100%; height: 7.5rem;

        img{width: 100%; height: 100%;}
      }
    }

  }

  .banner2{
    width:17.55rem; height: 2.5rem;  margin: 0.35rem auto; background: #fff; border-radius: .25rem;

    .b-img{ display: inline-block; margin-right: .5rem;

      img{height: 2rem; margin-top: .25rem; margin-left: 1rem;}
    }
    .b-content{display: inline-block; vertical-align: top; padding-left:1rem; height: 2rem; margin-top: .25rem; border-left:.05rem solid #e8e8e8;

      h3{font-size: .7rem; line-height: 1.2rem; color: #333;

        span{font-size: .6rem; font-weight: normal; margin-left: .1rem;}
      }
      p{font-size: .55rem; color: #999;}
    }
  }

  .oneweek{width: 100%; background: #fff;

    h2{height:1.9rem; text-align: center; font-size: .8rem; line-height: 1.9rem;

      img{width: .8rem; margin-left: .2rem; vertical-align:middle; padding-bottom: .3rem;}
    }
    .banner3{overflow: hidden;

      .swiper-wrapper{
        padding: .5rem 0;
      }
      .swiper-container {
        overflow: hidden;
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        margin-right:.2rem;
        width: 4.625rem;;


        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

        img{ width: 4.625rem; }
        .b3-title{width: 100%; text-align: center; font-size: .75rem; color:#666;}
        .b3-author{width: 100%; text-align: center; font-size: .55rem; color: #999;}

      }
    }
    h3{text-align: center; font-size: .6rem; color: #999; border-top: .05rem solid #e8e8e8; line-height:1.75rem; font-weight: normal;

      img{width: .6rem; margin-left: .2rem; vertical-align:middle; padding-bottom: .2rem;}
    }

  }
  .banner4{width: 100%;  background: #fff; margin-top: .5rem;

    h2{height:1.9rem; text-align: center; font-size: .8rem; line-height: 1.9rem;

      img{width: .8rem; margin-left: .2rem; vertical-align:middle; padding-bottom: .3rem;}
    }
    .swiper-container {
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        text-align: center;
        font-size: 18px;
        margin-right:.2rem;
        width:15.3rem;
        height:8.7rem;

        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;

        img{ width:15.3rem; height:8.7rem;}
      }
  }
  .banner5{width: 100%;  background: #fff; margin-top: .5rem; padding-bottom: .5rem;

    h2{height:1.9rem; text-align: center; font-size: .8rem; line-height: 1.9rem;

      img{width: .8rem; margin-left: .2rem; vertical-align:middle; padding-bottom: .3rem;}
    }
    .b5-Box{width: 17.55rem;margin: 0 auto;

      img{width: 100%; height: 5rem;  display: block;}
      h4{font-size: .7rem; color: #333; margin-top:.45rem; }
      p{font-size: .65rem; color: #666; margin-top:.45rem; text-align: justify;}
    }


  }

  .mint-popup{width: 100%; height: 100%;}
}
</style>